<template>
  <div class="loginhome">
    <!-- 头部 -->
    <div class="loginheader">
      <span
        class="el-icon-caret-left"
        @click="goback"
        style="cursor: pointer"
      ></span>
      <span>手机号登录</span>
    </div>
    <!-- 登录区域 -->
    <!-- 手机号密码 -->
    <el-form
      :model="loginForm"
      :rules="loginRules"
      ref="loginForm"
      label-width="100px"
      class="formsty"
    >
      <!-- 手机号 -->
      <el-form-item prop="phone" class="phoneitem">
        <el-input
          v-model="loginForm.phone"
          placeholder="手机号"
          prefix-icon="el-icon-user"
          class="phoneinput"
          @keyup.enter.native="addByEnterKey"
        ></el-input>
      </el-form-item>
      <!-- 密码 -->
      <el-form-item prop="password">
        <el-input
          type="password"
          v-model="loginForm.password"
          placeholder="请输入密码"
          prefix-icon="el-icon-lock"
          class="inputpassword"
          @keyup.enter.native="addByEnterKey"
        ></el-input>
      </el-form-item>
    </el-form>
    <!-- 登录按钮 -->
    <el-button type="primary" class="loginbtn" @click="login">登录</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loginForm: {
        phone: "",
        password: "",
      },

      loginRules: {
        phone: [
          { required: true, message: "请输入正确手机号", trigger: "blur" },
          {
            min: 10,
            max: 12,
            message: "手机号为11位",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入正确的密码", trigger: "blur" },
          { min: 6, max: 10, message: "长度在 6到 10 个字符", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    addByEnterKey(e) {
      //Enter键的代码就是13
      if (e.keyCode == 13) {
        this.login();
      }
    },
    //   登录
    login() {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          this.axios
            .get(
              `http://localhost:3000/login/cellphone?phone=${this.loginForm.phone}&password=${this.loginForm.password}&timestamp=1503019930000`
            )
            .then((res) => {
              if (res.data.code == 200) {
                window.sessionStorage.setItem("token", res.data.token);
                this.$router.push("/home");
                this.$message.success("恭喜您登录成功");
              } else {
                this.$message.error(res.data.msg);
              }
            })
            .catch((err) => {
              console.log(err);
            });
        } else {
          return false;
        }
      });
    },

    //   返回按钮返回
    goback() {
      this.$router.push("/");
    },
  },
};
</script>

<style scoped>
.loginheader {
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  color: red;
  border-bottom: red 1px solid;
  height: 30px;
}
.loginbtn {
  width: 330px;
  margin-top: 30px;
  margin-left: 10px;
  background-color: red;
}
.formsty {
  width: 350px;
  margin-left: -90px;
}
.phoneinput {
  width: 330px;
  margin-top: 20px;
}

.inputpassword {
  width: 330px;
  margin-top: 10px;
}
</style>